<!doctype html>
<html ng-app="app">
  <head>
    <title ng-bind="title"></title>
    <style>
      body {
        background-color: #EFF1F5;
        font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
        padding: 0;
        margin: 0;
        -webkit-font-smoothing: antialiased;
      }
      preview {
        display: block;
        max-width: 855px;
        margin: 0 auto 0 auto;
        overflow: auto;
      }
      h2 {
        color: #fff;
        font-weight: 200;
        letter-spacing: 1px;
      }
      #header-left {
        position: absolute;
        top: 20px;
        left: 20px;
        line-height: 40px;
      }
      #header-left span {
        margin-left: 10px;
        vertical-align: middle;
        display: inline-block;
        font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
        font-weight: 300;
        color: #6F7582;
        font-size: 16px;
      }
      #header {
      }
      #header #left {
        position: absolute; 
        left: 20px;
        top: 20px;
      }
      #header {
        position: fixed;
        top: 30px;
        right: 20px;
      }
      #header a {
        color: #fff;
        display: inline-block;
        margin: 0px 9px;
        opacity: 0.4;
        font-size: 90%;
        letter-spacing: 1px;
        text-decoration: none;
      }
      #header a:hover {
        opacity: 1;
      }
      h2 a {
        font-size: 18px;
        color: #6F7582;
        text-decoration: none;
      }
      .phone {
        float: left;
        margin: 40px 20px 0 20px;
      }
      .frame {
        border: none;
        border-radius: 3px;
        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.3);
      }
      #iphone-frame {
        top: 109px;
        left: 25px;
        width: 375px;
        height: 667px;
      }
      #android-frame {
        top: 88px;
        left: 24px;
        width: 375px;
        height: 667px;
      }
      #iphone {
      }
      #android {
      }
      #logo {
        display: inline-block;
        width: 48px;
        height: 48px;
        vertical-align: middle;
        background-image: url();
        background-repeat: no-repeat;
        width: 40px;
        height: 40px;
        background-size: 100%;
      }
      #logo:hover {
        opacity: 1;
      }
      #logo img {
        max-width: 100%;
      }
    </style>

    <!-- quick and dirty templating, don't touch this -->
    <script>
      //INSERT_JSON_HERE;
    </script>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
    <script>
      angular.module('app', [])
      .directive('preview', function() {
        return {
          restrict: 'E',
          scope: true,
          link: function($scope, $element, $attr) {
            $scope.screenSizes = [
              { label: 'iPhone 5 (320x568)', size: '320x568' }
            ];
            $scope.screenSize = $scope.screenSizes[0];
          }
        }
      })
      .run(['$rootScope', function($rootScope) {
        $rootScope.appName = BOOTSTRAP && BOOTSTRAP.appName || null;
        $rootScope.title = $rootScope.appName && $rootScope.appName + ' - Ionic App' || 'Ionic App';
      }]);
    </script>

  </head>
  <body>
    <div id="header-left">
      <a target="_blank" href="http://ionicframework.com/" id="logo">
      </a>
      <span ng-bind="appName"></span>
    </div>
    <!--
    <header id="header">
      <a target="_blank" href="http://ionicframework.com/docs/components/">CSS</a>
      <a target="_blank" href="http://ionicframework.com/docs/api/">API</a>
      <a target="_blank" href="http://forum.ionicframework.com/">Forum</a>
      <a target="_blank" href="http://ngcordova.com/">ngCordova</a>
      <a target="_blank" href="https://github.com/driftyco/ionic">GitHub</a>
    </header>
    -->
    <preview>
      <!--
      <div id="choice">
        <select ng-model="screenSize" ng-options="s.label for s in screenSizes"></select>
      </div>
      -->
      <div class="phone">
        <div id="iphone">
          <h2><a href="/?ionicplatform=ios" target="_blank">iOS</a></h2>
          <iframe id="iphone-frame" src="/?ionicplatform=ios" class="frame"></iframe>
        </div>
      </div>
      <div class="phone">
        <div id="android">
          <h2><a href="/?ionicplatform=android" target="_blank">Android</a></h2>
          <iframe id="android-frame" src="/?ionicplatform=android" class="frame"></iframe>
        </div>
      </div>
    </preview>
    <!--
    <a href="http://ionicframework.com/" id="logo">
      <img src="http://docs.ionic.io/img/ionic-logo.png">
    </a>
    -->
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

      ga('create', 'UA-44023830-9', {
        'cookieDomain': 'none'
      })
      ga('send', 'pageview');
    </script>
  </body>
</html>
